<template>
    <div class="home-top">
        <h3>超人气推荐</h3>
        <div class="content">
            <van-card v-for="item in productList"
                :tag="item.tag"
                :price="item.price"
                :desc="item.desc"
                :title="item.title"
                :thumb="item.thumb"
                :origin-price="item.origin_price"
            />
        </div>
    </div>
</template>

<script setup>
const productList = [
    {
        title: 'A类婴幼儿童蚕丝被',
        desc: '100%桑蚕丝被芯幼儿园午睡空调被',
        price: '463',
        origin_price: '528',
        tag: 'TOP1',
        thumb: '/public/images/top1.jpg'
    },
    {
        title: '儿童宝宝学步车',
        desc: '手推恐龙玩具推推乐两1到3岁婴儿推车助步',
        price: '13.80',
        origin_price: '19.80',
        tag: 'TOP2',
        thumb: '/images/top2.jpg'
    },
    {
        title: '索尼PS5 Pro',
        desc: '新款家用数字版游戏机',
        price: '5785',
        origin_price: '5790',
        tag: 'TOP3',
        thumb: '/images/top3.jpg'
    },
    {
        title: '【顺丰速运】乐高霍格沃茨城堡',
        desc: '官方旗舰店霍格沃茨城堡积木玩具',
        price: '1059',
        origin_price: '1399',
        tag: 'TOP4',
        thumb: '/images/top4.jpg'
    },
    {
        title: '白夜行',
        desc: '精装典藏版推理小说东野圭吾作品',
        price: '14.60',
        origin_price: '19.60',
        tag: 'TOP5',
        thumb: '/images/top5.jpg'
    },
    
]

</script>

<style lang="scss" scoped>
.home-top {
    h3 {
        font-size: 22px;
        line-height: 30px;
        text-align: center;
        margin: 0.5em auto;
    }
    .content {
        :deep(.van-card) {
            .van-card__title {
                font-size: 15px;
                line-height: 20px;
            }
         }
    }
}
</style>